<template>
  <!-- lx 2023年4月3日08:29:25 -->
    <!-- 首页限时抢购 -->
    <el-container style="display: none;">
      <div id="seckillList" class="seckillList" >
        <!-- 左侧显示抢购 -->
        <div class="cardleft">
          <p class="limitleft">限时抢购</p>
          <!-- <div>
            <p style="text-align: center;color: white;font-size: 16px;margin-top: 90px;">10：00专场</p>
          </div> -->
          <!-- 倒计时 -->
          <!-- <div class="recom_time">
              <div class="time_num hour">01</div>
              <span class="time_point">:</span>
              <div class="time_num minute">20</div>
              <span class="time_point">:</span>
              <div class="time_num second">40</div>
          </div> -->
        </div>
        <!-- 中间栏限时抢购 -->
        <div @click="ASeckill()">
          <el-row class="cardcenter" >
            <el-col :span="4" v-for="item,index in seckillAll" :key="index" style="background:white;float:left;width:210px;height:100%;margin-left: 15px;" @click="ASeckill()">
                  <img :src="'http://101.43.223.224:8765/image/getImageById?id='+item.imageId.split(',')[0]" class="image" style="margin-top:15px;border-radius:30px;margin-left: 40px;width:130px;height:130px;box-shadow:0 0 1px gray;"/>
                  <div style="margin-top: 10px;" @click="ASeckill()">
                  <p style="font-size:18px;text-align: center;clear: both;">{{item.commodityName}}</p>
                  <p style="color:red;font-size:16px;text-align: center;margin-top: -10px;position: absolute;bottom:5px;margin-left: 85px;">￥{{item.seckillPrice}}</p>
                  
                </div>
            </el-col>
          </el-row>
        </div>
        <!-- 中间显示限时抢购4条数据栏 -->
        <div class="cardright" @click="ASeckill()">
          <img class="boxright" src="@/assets/image/Seckill/box.jpg">
          <p class="limiertright">优品限时秒杀</p>
          <p class="limitright">低至五折</p>
        </div>  
    </div>
    </el-container>
    
</template>

<script>
const axios = require('axios')
import CountDown1 from 'vue2-countdown'
export default {
    template: "seckillList",
    data() {
        return {
          // 首页限时抢购商品信息
          seckillAll: [],
        }
    },
    mounted() {
		// 首页展示限时抢购商品
		this.getSeckillAll()
    },
    // 退出页面清除定时器
    beforeDestory(){
		clearInterval(this.timer);
	},
    methods: {
		// 跳转到限时抢购商品详情页面
		ASeckill() {
			this.$router.push({
				path: "/seckillView"
			});
		},
		// 获取首页显示抢购商品信息
		getSeckillAll() {
			this.$axios.get('/seckill/getSeckillAll',).then((res) => {
			// debugger
				if (res.data.flag) {
					this.seckillAll = res.data.data
				}
			})
			.catch(() => {
				this.$message.error('服务器崩溃了，请稍后再尝试使用！')
			})
		},
	}
}

</script>
<style scoped>
.recom_time {
	width: 180px;
	margin: 10px 0 0 4px;
  margin-left: 10px;
  text-align: center;
}
 
.time_num {
	float: left;
	width: 35px;
	height: 35px;
	background-color: #000;
	margin-left: 10px;
	display: block;
	color: #fff;
	line-height: 35px;
	font-size: 24px;
}
 
.time_point {
	float: left;
	margin-top: -2px;
	width: 10px;
	font-size: 28px;
	color: #fff;
	padding-left: 10px;
	line-height: 35px;
}
.seckillList{
  width:80%;
  height:100%;
  margin:0 auto;
}
/* 限时抢购左侧栏 */
.cardleft {
  background: url('~@/assets/image/Seckill/se.png') center center no-repeat;
  float: left;
  height: 260px;
  width: 15%;
  margin-left: 10px;
}
/* 限时抢购左侧栏文字 */
.limitleft{
  color: white;
  font-size:32px;
  text-align: center;
}
/* 限时抢购中间栏 */
.cardcenter{
  float: left;
  height: 260px;
  width: 68%;
  margin-left: 3px;
}
/* 限时抢购右侧栏 */
.cardright{
  float: left;
  background-color: white;
  height: 260px;
  width: 210px;
}
/* 限时抢购右侧栏图片 */
.boxright{
  margin-left: 36px;
  margin-top: 20px;
}
.limiertright{
  color:black;
  text-align: center;
  font-size:16px;
}
/* 限时抢购右侧栏文字 */
.limitright{
  color:black;
  font-size:14px;
  text-align: center;
  font-weight: bold;
}

</style>
  